<template>
    <div>
        <!-- 数据导入和模板下载 -->
        <el-card class="card" style="height: 650px">
            <div slot="header">数据导入</div>
            <div>
                <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px; margin-left: 20px">
                    <!-- <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="负责人">
                                <el-input v-model="form.name" placeholder="请输入负责人姓名..."></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row :gutter="10">
                        <el-col :span="5">
                            <el-form-item label="模板下载">
                                <el-button type="primary" @click="DownLoadModel">模板下载</el-button>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="5">
                            <el-form-item label="数据导入">
                                <el-upload
                                    class="upload-demo" 
                                    :http-request="ImportOneWellAllData" 
                                    :show-file-list="false" 
                                    action=""
                                    drag
                                    :limit="1"
                                    multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击导入文件</em></div>
                                    <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，点击打开，立即导入相关信息。</div>
                                </el-upload>
                                <!-- <div style="margin-left: 10px; display: inline-block; margin-right:10px">
                                    <el-upload class="upload-demo" :http-request="ImportWell" :show-file-list="false" action="">
                                        <el-button type="success">导入</el-button>
                                    </el-upload>
                                </div> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import { InsertOneWellAllData, downTemplateExcel } from '../../api/module/dataClassification/excel';
export default {
    data() {
        return {
            form: {name: ''}
        };
    },
    created() {},
    methods: {
        //excel导入数据
        ImportOneWellAllData(item) {
             const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            console.log(item.file)
            InsertOneWellAllData(formData)
                .then((res) => {
                  
                    loading.close();
                    this.$message.success("导入成功")
                })
                .catch((err) => {
                    this.$message.warning("导入失败")
                     loading.close();
                    console.log(err);
                });
        },
        //下载模板
        DownLoadModel() {
            //下载excel模板
            downTemplateExcel('OneWellData').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '单次固井导入模板.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
    },
}
</script>

<style scoped>
.card >>> .el-card__body {
	padding: 5px;
}
.card >>> .el-card__header {
	font-size: 17px;
	padding: 5px 10px;
	/* padding: 5px 10px !important; */
	height: 40px;
	line-height: 30px;
	background-color: #eef0f6;
}
/* .upload-demo >>> .el-upload--text {
    width: 120px;
    height: 32px;
    border-radius: 0px;
    border: none;
    display: flex;
    align-items: center;
} */
.upload-demo >>> .el-upload__tip {
    width: 400px;
    height: 32px;
}
</style>